<template>
  <span>
    <a-popover title="自定义列" trigger="click" placement="leftBottom">
        <template slot="content">
          <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
            <a-row style="width:500px">
              <template v-for="(item,index) in defColumns">
                <template >
                    <a-col :span="8" :key="index">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                </template>
              </template>
            </a-row>
          </a-checkbox-group>
        </template>
        <a><a-icon type="setting" />设置</a>
    </a-popover>
  </span>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'ColSetting',
  props: {
    defColumns: {// 默认列
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 列设置
      settingColumns: [],
      columns: []
    }
  },
  watch: {
    defColumns: {
      handler: function(newValue, oldValue) {
        this.initColumns()
      },
      deep: true
    }
  },
  mounted() {
    this.initColumns()
  },
  methods: {
    // 列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + this.$route.params.code + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      // const cols = this.defColumns.filter(item => {
      //   if (this.settingColumns.includes(item.dataIndex)) {
      //     return true
      //   }
      //   return false
      // })
      // this.columns = cols
      this.$emit('columnsSetting', checkedValues)
    },
    initColumns() {
      // 权限过滤（列权限控制时打开，修改第二个参数为授权码前缀)
      var key = this.$route.name + this.$route.params.code + ':colsettings'
      const colSettings = Vue.ls.get(key)
      if (colSettings === null || colSettings === undefined) {
        const allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.columns = this.settingColumns = allSettingColumns
      } else {
        this.columns = this.settingColumns = colSettings
        // const cols = this.defColumns.filter(item => {
        //   if (colSettings.includes(item.dataIndex)) {
        //     return true
        //   }
        //   return false
        // })
        // this.columns = colSettings
      }
      this.$emit('columnsSetting', this.columns)
    }
  }
}
</script>
